<template>
  <div>
    <van-nav-bar title="城市列表" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 索引城市列表展示 -->
    <van-index-bar highlight-color="#ff5f16" :index-list="indexList">
      <template v-for="(itemList, key) of cities">
        <van-index-anchor :key="key" :index="key" />
        <template v-for="item of itemList">
          <van-cell>
            <template #title>
              <h3 @click="selectCity(item.name, item.cityId)">{{ item.name }} -- {{ item.cityId }}</h3>
            </template>
          </van-cell>
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import { getCitiesInfo } from '@/api/cityApi'
export default {
  data() {
    return {
      cities: [],
      indexList: []
    }
  },
  async mounted() {
    let ret = await getCitiesInfo()
    this.cities = ret
    this.indexList = Object.keys(ret)
  },
  methods: {
    selectCity(name, id) {
      // 同步操作
      this.$store.commit('city/setCityInfo', { name, id })
      // 点击后进行路由的跳转
      this.$router.push('/films/nowPlaying')
    }
  }
}
</script>

<style lang="scss" scoped></style>
